<template>
    <el-form :inline="true" class="demo-form-inline" :style="getcss">
        <el-form-item :label="lable">
            <el-input :placeholder="lable" v-bind="$attrs" v-on="$listeners"></el-input>
        </el-form-item>
    </el-form>
</template>
<script>
export default {
    props: ["lable", 'backgroundcolor', 'bordercolor'],
    computed: {
        getcss() {
            let css = "---backgroundcolor:#121111;---bordercolor:#4376eb;";
            if (this.backgroundcolor != null) {
                css = css + "---backgroundcolor:" + this.backgroundcolor + ";"
            }
            if (this.bordercolor != null) {
                css = css + "---bordercolor:" + this.bordercolor + ";"
            }
            return css;
        }
    }
}
</script>
<style scoped>
.demo-form-inline>>>.el-form-item__label {
    min-width: 80px;
    color: currentColor;
}

.demo-form-inline>>>.el-form-item {
    display: flex;
}

.demo-form-inline>>>.el-form-item__content {
    width: 100%;
}

.demo-form-inline>>>.el-input__inner {
    background-color: var(---backgroundcolor);
    border-color: var(---bordercolor);
}
</style>